import Input from './components/input'
import InputNumber from './components/inputNumber'
import Page from './components/page'
import locale from './locale'
import Layout from './components/layout'
import Row from './components/grid'
import Tabs from './components/tabs'
import Tree from './components/tree'
import Icon from './components/icon'
import Form from './components/form'
import Table from './components/table'
import TableExpand from './components/table/src/expand'
import Loading from './components/loading'
import ButtonGroup from './components/button'
import Model from './components/model'
import ShSwitch from './components/switch'
import Breadcrumb from './components/breadcrumb'
import Alert from './components/alert'
import Message from './components/message'
import Notice from './components/notice'
import CheckboxGroup from './components/checkbox'
import Select from './components/select'
import Cascader from './components/cascader'
import CascaderEasy from './components/cascaderEasy'
import Tag from './components/tag'
import RadioGroup from './components/radio'
import DatePicker from './components/datePicker'
import TimePicker from './components/timePicker'
import Upload from './components/upload'
import Menu from './components/menu'
import Tooltip from './components/tooltip'
import Poptip from './components/poptip'
import Images from './components/image'
import InformationList from './components/information'
import Steps from './components/steps'

const components = {
  Layout,
  Header: Layout.Header,
  Content: Layout.Content,
  Article: Layout.Article,
  Footer: Layout.Footer,
  Row,
  Col: Row.Col,
  Tabs,
  TabPane: Tabs.TabPane,
  Tree,
  Model,
  Loading,
  Input,
  InputNumber,
  Icon,
  Form,
  FormItem: Form.FormItem,
  Table,
  TableExpand,
  Button: ButtonGroup.Button,
  ShSwitch,
  Breadcrumb,
  Page,
  ButtonGroup,
  Alert,
  Checkbox: CheckboxGroup.CheckBox,
  CheckboxGroup,
  Radio: RadioGroup.Radio,
  RadioGroup,
  Select,
  Option: Select.Option,
  Cascader,
  CascaderEasy,
  Tag,
  DatePicker,
  TimePicker,
  Upload,
  Menu,
  MenuGroup: Menu.Group,
  MenuItem: Menu.Item,
  Submenu: Menu.Sub,
  Message,
  Notice,
  Tooltip,
  Poptip,
  Images,
  Information: InformationList.Information,
  InformationList,
  Steps,
  Step: Steps.Step
}
let _Vue = null

const install = function (Vue, opts = {}) {
  _Vue = Vue
  if (install.installed) return
  locale.use(opts.locale)
  locale.i18n(opts.i18n)
  Vue.prototype.$shui = {
    size: opts.size || ''
  }

  Object.keys(components).forEach(key => {
    Vue.component(key, components[key])
  })
  // 绑定全局组件
  Vue.prototype.$message = Message
  Vue.prototype.$Notice = Notice
}

// auto install
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

const API = {
  version: '1.2.8',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  ...components
}

API.lang = (code) => {
  const langObject = window['shsc-ui/locale'].default
  if (code === langObject.i.locale) locale.use(langObject)
  else console.log(`The ${code} language pack is not loaded.`)
}
// ui组件类
/**
 * 1. 组件类需要注册到vue实例上才能响应式更新其变化。
 * 2. 在组件创建时，需要注册更新ui类。
 */
API.init = class Shscui {
  constructor (options) {
    Object.defineProperty(_Vue.prototype, '$shui', {
      get: function get () {
        // 在此处更新最新size
        return this._scui
      },
      set: function set (val) {
        // console.log('set', val)
      }
    })
    this.size = options.size
    _Vue.mixin({
      beforeCreate () {
        if (this.$options.scui) {
          this._scui = this.$options.scui
          _Vue.util.defineReactive(this, '_scui', this._scui)
        } else {
          this._scui = (this.$parent && this.$parent._scui) || this
        }
      }
    })
  }
}

export default API
